<template>
  <div id="courseware-management" class="container">
    <table-filter>
      <el-input
        placeholder="请输入课件名称"
        clearable
        v-model="apiSetting.data.resourcename"
      ></el-input>
      <el-select
          v-model="apiSetting.data.subid"
          clearable
          @clear="(apiSetting.data.chapterid = null) && (chapters = [])"
          @change="getChapter($event)"
          placeholder="请选择科目"
      >
        <el-option
            v-for="item in subjects"
            :key="item.subid"
            :label="item.subname"
            :value="item.subid"
        />
      </el-select>
      <el-select v-model="apiSetting.data.chapterid" placeholder="请选择章节">+
        <el-option
            v-for="item in chapters"
            :key="item.chapterid"
            :label="item.chaptername"
            :value="item.chapterid"
        />
      </el-select>
      <el-button plain type="warning" @click="search">查询</el-button>
    </table-filter>
    <el-row
      ><el-button plain type="primary" @click="showEaDialog = true"
        >添加课件</el-button
      ></el-row
    >
    <data-table
      ref="dtb"
      :sort-column="sortColumn"
      :api-setting="apiSetting"
      pagination
    >
      <el-table-column
          fixed
          label="排序"
          width="100"
          prop="sort"
          show-overflow-tooltip
      />
      <el-table-column
        prop="subname"
        label="所属科目"
        show-overflow-tooltip
      />
      <el-table-column
        prop="chaptername"
        label="所属章节"
        show-overflow-tooltip
      />
      <el-table-column
        prop="resourcename"
        label="课件名称"
        show-overflow-tooltip
      />
      <!-- <el-table-column
        prop="originalfilename"
        label="资源名称"
        show-overflow-tooltip
      />-->
      <el-table-column prop="createtime" label="创建时间" show-overflow-tooltip>
        <template slot-scope="{ row }">
          {{ row.createtime | formatterDate }}
        </template>
      </el-table-column>
      <el-table-column
        prop="createperson"
        label="创建人"
        show-overflow-tooltip
      />
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="{ row }">
          <el-button @click="view(row)" type="text" size="small" class="warning"
            >查看
          </el-button>
          <el-button
            @click="hasEaPermission(row.createperson, 'edit', row)"
            type="text"
            size="small"
            >编辑
          </el-button>
          <el-button
            @click="hasEaPermission(row.createperson, 'delCourseware', row)"
            type="text"
            size="small"
            class="danger"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </data-table>
    <ea-courseware
      ref="eaDialog"
      :subjects="subjects"
      :show.sync="showEaDialog"
      @on-reload="dtb.loadData()"
    />
    <el-dialog
      v-if="viewResource"
      title="查看课件"
      :visible.sync="visible"
      class="dialog"
      @close="onClose"
      @closed="onClosed"
      width="800px"
      center
    >
      <el-scrollbar wrap-class="scroll-wrap-y">
        <el-form>
          <el-form-item label="所属科目：">{{
            viewResource.subname
          }}</el-form-item>
          <el-form-item label="所属章节：">{{
            viewResource.chaptername
          }}</el-form-item>
          <el-form-item label="课件名称：">{{
            viewResource.resourcename
          }}</el-form-item>
          <el-form-item label="上传时间：">{{
            viewResource.createtime | formatterDate
          }}</el-form-item>
          <el-form-item label="创建人：">{{
            viewResource.createperson
          }}</el-form-item>
          <el-form-item label="课件封面：">
            <el-image
              style="width: 620px"
              :src="viewResource.imagePath"
              :fit="'contain'"
            >
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </el-form-item>
          <el-form-item label="课件详情：">
            <video
              autoplay
              style="width: 620px"
              controls="controls"
              controlslist="nodownload"
              :src="viewResource.path"
            ></video>
          </el-form-item>
        </el-form>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>

<script>
import dtb from "../../../mixins/refs/dtb";
import EaCourseware from "./EaCourseware";
import eaDialog from "../../../mixins/refs/eaDialog";
import deleteRow from "../../../mixins/dataTable/deleteRow";
import dialog from "../../../mixins/component/dialog";
import tbSearch from "@/mixins/dataTable/tbSearch";
import permission from "@/mixins/permission/permission";

export default {
  name: "index",
  components: { EaCourseware },
  mixins: [permission, tbSearch, dialog, dtb, eaDialog, deleteRow],
  data() {
    const dataStruct = {
      chapterid: null,
      reintroduction: "",
      resourcename: "",
      subid: null,
      resourceid: null,
      diagramUploaded: false,
      thumbnail: null,
      path: null
    };
    return {
      apiSetting: {
        method: "post",
        url: "/sys/courseware/getResource",
        data: {
          resourcename: "",
          subid: "",
          chapterid: ""
        }
      },
      singleData: this.deepClone(dataStruct),
      chapters: [],
      viewResource: null,
      sortColumn: ["resourcename", "originalfilename"],
      subjects: []
    };
  },
  created() {
    this.api.getAllSubList(1).then(res => {
      this.subjects = res;
    });
  },
  methods: {
    async edit({ resourceid }) {
      const oldData = await this.api.getResource(resourceid);
      const chapters = await this.api.getChapter(oldData.subid);
      this.showEaDialog = true;
      this.eaDialog.setEditData({
        singleData: oldData,
        chapters,
        oldDiagram: [{ name: oldData.thumbnail, url: oldData.imagePath }],
        hiddenUpload: true
      });
    },
    view({ resourceid }) {
      this.api.getResource(resourceid).then(res => {
        this.visible = true;
        this.viewResource = res;
      });
    },
    onClosed() {
      this.viewResource = null;
    },
    delCourseware({ resourceid }) {
      this.delRow(`/sys/courseware/deleteResource/${resourceid}`, "课件");
    },
    updateSort2(order,resourceid) {
      this.axios({
        method: "post",
        url: "/sys/subject/sort",
        data: {
          sort: parseInt(order),
          resourceid: resourceid
        }
      }).then(
          location.reload()
      );
    },
    getChapter(subId) {
      this.singleData.chapterid = null;
      subId &&
      this.api.getChapter(subId).then(res => {
        this.chapters = res;
      });
    }
  }
};
</script>

<style scoped></style>
